<template>
  <div  style="position: relative;">
    <mmTable ref="mmTable" :mmColumns="columns" :getUrl="url" :updateUrl="updateUrl" :delUrl="delUrl"
             :form="form" :formData="formData" v-on:formDataChange="formDataChange"
             :searchFormData="searchFormData" :searchForm="searchForm"
             :modalWidth="700"   :beforSave="beforSave">
      <Form slot="searchForm" ref="searchForm" :model="searchFormData" inline :label-width="70"  style="float: left">
        <FormItem label="用户名" prop="">
          <Input v-model="searchFormData.name" type="text" placeholder="" />
        </FormItem>
      </Form>
      <!--编辑添加模态框-->
      <Form  slot="editForm" :label-width="50" :model="formData" inline ref="editForm" :rules="formValidate">
        <Row>
          <Col :span="6">
          <FormItem label="单号" prop="billcode" style="width:150px">
            <Input v-model="formData.billcode" readonly/>
          </FormItem>
          </Col>
          <Col :span="6">
          <FormItem label="货物" prop="goods" style="width:150px">
            <materialSel v-model="formData.goods"/>
          </FormItem>
          </Col>
          <Col :span="6">
          <FormItem label="供货商" prop="manufactor" style="width:150px">
            <compaySel v-model="formData.manufactor"/>
          </FormItem>
          </Col>
          <Col :span="6">
          <FormItem label="水分" prop="moisture" style="width:150px">
            <Input v-model="formData.moisture" type="text" />
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col :span="6">
          <FormItem label="挥发份" prop="volatile" style="width:150px">
            <Input v-model="formData.volatile" type="text" />
          </FormItem>
          </Col>
          <Col :span="6">
          <FormItem label="灰份" prop="ash" style="width:150px">
            <Input v-model="formData.ash" type="text" />
          </FormItem>
          </Col>
          <Col :span="6">
          <FormItem label="硫" prop="s" style="width:150px">
            <Input v-model="formData.s" type="text" />
          </FormItem>
          </Col>
          <Col :span="6">
          <FormItem label="钒" prop="v" style="width:150px">
            <Input v-model="formData.v" type="text" />
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col :span="6">
          <FormItem label="钠" prop="na" style="width:150px">
            <Input v-model="formData.na" type="text" />
          </FormItem>
          </Col>
          <Col :span="6">
          <FormItem label="镁" prop="mg" style="width:150px">
            <Input v-model="formData.mg" type="text" />
          </FormItem>
          </Col>
          <Col :span="6">
          <FormItem label="铝" prop="al" style="width:150px">
            <Input v-model="formData.al" type="text" />
          </FormItem>
          </Col>
          <Col :span="6">
          <FormItem label="硅" prop="si" style="width:150px">
            <Input v-model="formData.si" type="text" />
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col :span="6">
          <FormItem label="磷" prop="p" style="width:150px">
            <Input v-model="formData.p" type="text" />
          </FormItem>
          </Col>
          <Col :span="6">
          <FormItem label="氯气" prop="cl" style="width:150px">
            <Input v-model="formData.cl" type="text" />
          </FormItem>
          </Col>
          <Col :span="6">
          <FormItem label="钾" prop="k" style="width:150px">
            <Input v-model="formData.k" type="text" />
          </FormItem>
          </Col>
          <Col :span="6">
          <FormItem label="钙" prop="ca" style="width:150px">
            <Input v-model="formData.ca" type="text" />
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col :span="6">
          <FormItem label="钛" prop="ti" style="width:150px">
            <Input v-model="formData.ti" type="text" />
          </FormItem>
          </Col>
          <Col :span="6">
          <FormItem label="铬" prop="gr" style="width:150px">
            <Input v-model="formData.gr" type="text" />
          </FormItem>
          </Col>
          <Col :span="6">
          <FormItem label="锰" prop="mn" style="width:150px">
            <Input v-model="formData.mn" type="text" />
          </FormItem>
          </Col>
          <Col :span="6">
          <FormItem label="铁" prop="fe" style="width:150px">
            <Input v-model="formData.fe" type="text" />
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col :span="6">
          <FormItem label="镍" prop="ni" style="width:150px">
            <Input v-model="formData.ni" type="text" />
          </FormItem>
          </Col>
          <Col :span="6">
          <FormItem label="铜" prop="cu" style="width:150px">
            <Input v-model="formData.cu" type="text" />
          </FormItem>
          </Col>
          <Col :span="6">
          <FormItem label="锌" prop="zn" style="width:150px">
            <Input v-model="formData.zn" type="text" />
          </FormItem>
          </Col>
          <Col :span="6">
          <FormItem label="铅" prop="pb" style="width:150px">
            <Input v-model="formData.pb" type="text" />
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col :span="6">
          <FormItem label="锶" prop="sr" style="width:150px">
            <Input v-model="formData.sr" type="text" />
          </FormItem>
          </Col>
          <Col :span="6">
          <FormItem label="钡" prop="ba" style="width:150px">
            <Input v-model="formData.ba" type="text" />
          </FormItem>
          </Col>
          <Col :span="6">
          <FormItem label="氟" prop="f" style="width:150px">
            <Input v-model="formData.f" type="text" />
          </FormItem>
          </Col>
          <Col :span="6">
          <FormItem label="碳" prop="cc" style="width:150px">
            <Input v-model="formData.cc" type="text" />
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col :span="24">
          <Table :height="300" size="small" border :columns="editTableColumns" :data="editTableData" @on-row-click="editTableClick" ref="editTable"/>
          </Col>
        </Row>

      </Form>
      <div slot="leftButtons" style="float: left">
        <Button @click="addRow">增行</Button>
        <Button @click="delRow">删行</Button>
      </div>
    </mmTable>
  </div>
</template>

<script>
import mmTable from '../components/mmtable/mmtable.vue'
import materialSel from '../components/select/materialSelect.vue'
import compaySel from '../components/select/compaySelect.vue'
import { getItemhy, getweightbycar } from '@/api/busi'
export default {
  components: {
    mmTable,
    materialSel,
    compaySel
  },
  data () {
    /* 显示列表 */
    return {
      columns: [
        { title: '化验单号', key: 'billcode', width: 200, align: 'center', fixed: 'left' },
        { title: '水份', key: 'moisture', width: 80, align: 'center' },
        { title: '挥发份', key: 'volatile', width: 80, align: 'center' },
        { title: '灰份', key: 'ash', width: 80, align: 'center' },
        { title: '硫', key: 's', width: 80, align: 'center' },
        { title: '钒', key: 'v', width: 80, align: 'center' },
        { title: '钠', key: 'na', width: 80, align: 'center' },
        { title: '镁', key: 'mg', width: 80, align: 'center' },
        { title: '铝', key: 'al', width: 80, align: 'center' },
        { title: '硅', key: 'si', width: 80, align: 'center' },
        { title: '磷', key: 'p', width: 80, align: 'center' },
        { title: '氯气', key: 'cl', width: 80, align: 'center' },
        { title: '钾', key: 'k', width: 80, align: 'center' },
        { title: '钙', key: 'ca', width: 80, align: 'center' },
        { title: '钛', key: 'ti', width: 80, align: 'center' },
        { title: '铬', key: 'gr', width: 80, align: 'center' },
        { title: '锰', key: 'mn', width: 80, align: 'center' },
        { title: '铁', key: 'fe', width: 80, align: 'center' },
        { title: '镍', key: 'ni', width: 80, align: 'center' },
        { title: '铜', key: 'cu', width: 80, align: 'center' },
        { title: '锌', key: 'zn', width: 80, align: 'center' },
        { title: '铅', key: 'pb', width: 80, align: 'center' },
        { title: '锶', key: 'sr', width: 80, align: 'center' },
        { title: '钡', key: 'ba', width: 80, align: 'center' },
        { title: '氟', key: 'f', width: 80, align: 'center' },
        { title: '碳', key: 'cc', width: 80, align: 'center' },
        { title: '厂家', key: 'companyname', width: 200, align: 'center' },
        { title: '货品', key: 'materialname', width: 200, align: 'center' },
        { title: '总重量', key: 'totalweight', width: 200, align: 'center' },
        { title: '化验人', key: 'creatorname', width: 200, align: 'center' },
        { title: '化验时间', key: 'assaytime', width: 200, align: 'center' }
      ],
      /* 编辑列表中框中的显示列表 */
      tempArray: [],
      editTableColumns: [
        { title: '行号',
          width: 70,
          align: 'center',
          render: (h, params) => {
            return h('div', {}, params.index + 1)
          } },
        { title: '进场编号',
          key: 'inbillcode',
          width: 200,
          align: 'left',

          render: (h, formData) => {
            if (this.curEditRow == formData.index) {
              return h('Input', {
                props: {
                  type: 'text',
                  value: this.editTableData[formData.index].inbillcode
                },
                on: {
                  'input': (val) => {
                    formData.row.inbillcode = val
                    this.editTableData[formData.index] = formData.row
                  },
                  'on-enter': () => {
                    let that = this
                    getweightbycar({ inbillcode: formData.row.inbillcode }).then(res => {
                      if (res.data.code == 200) {
                        if (res.data.data) {
                          that.editTableData[formData.index] = res.data.data
                          that.$set(that.editTableData, [formData.index], res.data.data)
                        } else {
                          that.$Message.error('未找到对应批次')
                        }
                      } else {
                        that.$Message.error(res.data.msg)
                      }
                    })
                  }
                }
              })
            } else {
              return h('div', {}, this.editTableData[formData.index].inbillcode)
            }
          } },
        { title: '车牌号',
          key: 'car',
          width: 200,
          align: 'left'
        },
        { title: '重量', key: 'weigh', width: 200, align: 'left' }
      ],
      curEditRow: -1,
      /* 链接后台 */
      url: '/Ciq/getList',
      updateUrl: '/Ciq/Save',
      delUrl: '/Ciq/Delete',
      form: {},
      formValidate: {
      },
      searchForm: {},
      searchFormData: {
        code: '',
        name: ''
      },
      /* 后台传的数据 */
      formData: {
        code: '',
        goods: '',
        laboratory: '',
        car: '',
        manufactor: '',
        moisture: '',
        volatile: '',
        ash: '',
        s: '',
        v: '',
        na: '',
        mg: '',
        al: '',
        si: '',
        p: '',
        cl: '',
        k: '',
        ca: '',
        ti: '',
        gr: '',
        mn: '',
        fe: '',
        ni: '',
        cu: '',
        zn: '',
        pb: '',
        sr: '',
        ba: '',
        f: '',
        cc: '',
        component: '',
        id: '',
        weigh: '',
        materialname: '',
        companyname: '',
        totalweight: ''

      },
      searchFormData: {
        name: ''
      },
      editTableData: [

      ],
      searchForm: {}
    }
  },
  mounted () {
    this.form = this.$refs.editForm
    this.searchForm = this.$refs.searchForm
  },
  /* 方法 */
  methods: {
    formDataChange (data) {
      this.formData = data
      getItemhy({ pid: data.id }).then(res => {
        if (res.data.code == '200') {
          this.editTableData = res.data.data.data
        }
      })
    },
    addRow () {
      this.editTableData.push({})
      this.curEditRow = this.editTableData.length - 1
    },
    delRow () {
      if (this.curEditRow > 0 && this.curEditRow < this.editTableData.length) {
        this.editTableData.splice(this.curEditRow, 1)
      } else {
        if (this.editTableData.length > 0) {
          this.editTableData.splice(this.editTableData.length - 1, 1)
        }
      }
      this.curEditRow = -1
    },
    editTableClick (row, index) {
      this.curEditRow = index
    },
    beforSave () {
      var items = []
      this.editTableData.forEach((row) => {
        for (let attr in row) {
          if (row[attr] === null) {
            row[attr] = ''
          }
        }
        let str = JSON.stringify(row)
        let data = JSON.parse(str)
        items.push(str)
      })

      this.formData.items = '[' + items + ']'
      return true
    }
  }
}
</script>

<style>

</style>
